<!--
    编辑扩展字段
-->
<ion-header>
    <ion-toolbar content-page>
        <ion-buttons start>
            <button ion-button icon-only (click)="backToProPage()">
                <i class="back">取消</i>
            </button>
        </ion-buttons>
        <ion-title>编辑客户信息</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="checkClient($event)" [disabled]="isDisabled">
                <i>保存</i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content (ionScroll)="onScroll()">
    <ion-list>
        <!--电话-->
        <ion-item-sliding *ngFor="let a of clientsModel.mobilePhone;let i=index">
            <!--<ion-item class="telPhone" [ngClass]="a.isDel?'c3Tel':'nonC3Tel'"-->
                      <!--*ngFor="let a of clientsModel.mobilePhone;let i=index"-->
                      <!--[ngClass]="{'phoAndAddMore':(i>0)}">-->
                <!--<ion-label class="span-label">电话{{i>0?(i+1):''}}</ion-label>-->

                <!--<ion-input #tel type="tel" class="phone-number" pattern="/[0-9]*/"-->
                           <!--placeholder="请填写" (ionChange)="inputOnchange(i,tel,$event)"-->
                           <!--[(value)]="a.mobile"-->
                           <!--[disabled]="a && a.individual==1">-->
                <!--</ion-input>-->

                <!--<button item-end class="delPhone" *ngIf="i!==0">-->
                    <!--<i class="delPho" *ngIf="a && !a.individual && !a.isDel"-->
                       <!--(click)="beforeDelPhone(a,$event,i,clientsModel.mobilePhone,clientsModel.addressList)"></i>-->
                    <!--<span *ngIf="a.isDel" (click)="delLocalPhone(i,$event,a)">删除</span>-->
                <!--</button>-->
            <!--</ion-item>-->
            <ion-item class="telPhone">
                <ion-label class="span-label">电话{{i>0?(i+1):''}}</ion-label>
                <ion-input #tel type="tel" class="phone-number" pattern="/[0-9]*/" placeholder="请填写"
                           (ionChange)="inputOnchange(i,tel,a,$event)"
                           [(value)]="a.mobile" [disabled]="a && a.individual==1">
                </ion-input>
            </ion-item>
            <ion-item-options side="right" *ngIf="i!=0 && a && !a.individual">
                <button item-end class="delPhone">
                    <span (click)="delLocalPhone(i,$event,a)">删除</span>
                </button>
            </ion-item-options>
        </ion-item-sliding>
        <!-- 添加电话 -->
        <ion-item class="phoneAndAddBox" (click)="addNewPhone($event)">
            <div class="phoneAndAdd" >
                <img src="./assets/images/client/client-add/icon_add.png" alt="">
                添加电话
            </div>
        </ion-item>
        <!--地址 、邮编-->


        <ion-item-sliding class="addressList" *ngFor="let a of clientsModel.addressList;let i=index"
                          [ngClass]="i!==clientsModel.addressList.length-1?'device-pixel-border-bottom':''">
            <ion-item>
                <ion-label class="addressLabel">
                    地址{{i>0?(i+1):''}}
                </ion-label>
                <ion-input #address class="addressInput" type="text" (blur)="inputBlur(i)"
                           (focus)="inputFocus($event)" [disabled]="a && a.individual==1"
                           placeholder="请填写" maxlength="100"
                           [(ngModel)]="a.address">

                </ion-input>
                <ion-label class="postNumLabel">
                    邮编{{i>0?(i+1):''}}
                </ion-label>
                <ion-input class="postInput" #postNum type="tel"
                           [disabled]="a && a.individual==1" placeholder="请填写"
                           (focus)="inputFocus($event)" [(ngModel)]="a.postCode" maxlength="6"></ion-input>
                <!-- 定位 -->
                <ion-label class="phoneAndAddBox situation" (click)="setDefaultAddress(i,a.defaultIndicator)">
                    <div class="phoneAndAdd" >
                        <img *ngIf="a.defaultIndicator==1" src="./assets/images/client/client-add/icon_pitchon.png" alt="" >
                        <img *ngIf="a.defaultIndicator!=1" src="./assets/images/client/client-add/icon_pitchout.png" alt="">
                        <span>{{a.defaultIndicator==1?"客户地图定位地址":"设为客户地图定位地址"}}</span>
                    </div>
                </ion-label>
            </ion-item>
            <ion-item-options side="right" *ngIf="i!==0 && a && !a.individual">
                <button item-end class="delPhone">
                    <span (click)="delLocalAddress(i,$event,a)">删除</span>
                </button>
            </ion-item-options>
        </ion-item-sliding>


        <!--添加地址-->
        <ion-item class="phoneAndAddBox addAddress">
            <div class="phoneAndAdd" (click)="addNewAddress($event)">
                <img src="./assets/images/client/client-add/icon_add.png" alt="">
                <span>添加地址</span>
            </div>
        </ion-item>
        <!--婚育-->
        <ion-item>
            <ion-label>婚育</ion-label>
            <ion-select placeholder="请选择" cancelText="取消" #select1
                        interface="action-sheet" [(ngModel)]="clientsModel.marriageType">
                <ion-option value="1">已婚</ion-option>
                <ion-option value="2">未婚</ion-option>
                <ion-option value="3">其他</ion-option>
            </ion-select>
        </ion-item>
        <!--子女-->
        <ion-item>
            <ion-label>子女</ion-label>
            <ion-select placeholder="请选择" cancelText="取消" #select2
                        interface="action-sheet" [(ngModel)]="clientsModel.childNum">
                <ion-option value="0">0个</ion-option>
                <ion-option value="1">1个</ion-option>
                <ion-option value="2">2个</ion-option>
                <ion-option value="3">3个及以上</ion-option>
            </ion-select>
        </ion-item>
        <!--住房-->
        <ion-item>
            <ion-label>住房</ion-label>
            <ion-select placeholder="请选择" cancelText="取消" #select3
                        interface="action-sheet" [(ngModel)]="clientsModel.houseOwnership">
                <ion-option value="1">租房</ion-option>
                <ion-option value="2">自有</ion-option>
            </ion-select>
        </ion-item>
        <!--私家车-->
        <ion-item>
            <ion-label>私家车</ion-label>
            <ion-select placeholder="请选择" cancelText="取消" #select4
                        interface="action-sheet" [(ngModel)]="clientsModel.carOwnership">
                <ion-option value="1">有</ion-option>
                <ion-option value="0">无</ion-option>
            </ion-select>
        </ion-item>
        <!--是否在其他公司购买保险-->
        <ion-item>
            <ion-label class="labelOther">是否在其他公司购买保险</ion-label>
            <ion-select (ionChange)="otherSelectChoose()" placeholder="请选择" cancelText="取消"
                        #select5 interface="action-sheet" [(ngModel)]="clientsModel.otherIns">
                <ion-option value="1">有</ion-option>
                <ion-option value="0">无</ion-option>
            </ion-select>
        </ion-item>
        <!--购买类型-->
        <ion-item *ngIf="clientsModel.otherIns==1">
            <!--<i item-start class="itype"></i>-->
            <ion-label class="labelType">购买类型</ion-label>
            <ion-select placeholder="请选择" cancelText="取消" #select6
                        interface="action-sheet" [(ngModel)]="clientsModel.insType">
                <ion-option value="1">儿童成长</ion-option>
                <ion-option value="2">养老规划</ion-option>
                <ion-option value="3">健康保障</ion-option>
                <ion-option value="4">人身保障</ion-option>
                <ion-option value="5">财富保障</ion-option>
            </ion-select>
        </ion-item>
    </ion-list>
</ion-content>
